<template>
  <div>
    <monacoEditor v-model="value" :opts="opts" @contentChange="contentChange"></monacoEditor>
  </div>
</template>
 
<script>
import monacoEditor from './monaco-editor.vue'
// import monaco from '@/monaco.vue'
export default {
  components: {
    monacoEditor,
  },
  data() {
    return {
      value: '',
      countent: '',
      opts: {
        value: '',
        minimap: {
          enabled: false // 关闭缩略图
        },
        theme: "vs", // 主题 vs, vs-dark, hc-black
        language: "js",
        tabSize: 2, // tab缩进长度
        // autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
        // autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
        // autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
        // autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
        // cursorBlinking: 'solid', // 光标动画样式 blink | smooth | phase | expand | solid
        // cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
        // cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
        // cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
        folding: true, // 是否折叠
        foldingHighlight: true, // 折叠等高线
        foldingStrategy: "indentation", // 折叠方式  auto | indentation
        showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
        disableLayerHinting: true, // 等宽优化
        emptySelectionClipboard: false, // 空选择剪切板
        selectionClipboard: false, // 选择剪切板
        automaticLayout: true, // 自动布局
        codeLens: false, // 代码镜头
        scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
        colorDecorators: true, // 颜色装饰器
        accessibilitySupport: "off", // 辅助功能支持  auto | off | on
        lineNumbers: "on", // 行号 取值： on | off | relative | interval | function
        lineNumbersMinChars: 5, // 行号最小字符   number
        enableSplitViewResizing: false,
        readOnly: false, //是否只读  取值 true | false
        fontSize: 20,       //字体大小
        overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
        wordWrap: 'on', // 设置编辑器的换行 off | on | wordWrapColumn | bounded
        wrappingIndent: 'same', // 控制换行的缩进 none | same | indent | deepIndent 
        renderLineHighlight: 'line', // 当前行突出显示方式 none | gutter | line | all
        // roundedSelection: false, // 选区是否有圆角
        // scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
      },
    }
  },
  methods: {
    contentChange(val) {
      //每次改变编辑器内容触发事件，先用一个值存放数据
      this.countent = val
    },
    submit() {
      //在你提交给后台时将this.countent赋值给value
      this.countent = this.value
    },
  },
}
</script>
 
<style>
</style>